<template>
  <div class="app-container">
    <el-row :gutter="10" style="margin-left: 0">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="班次名称" prop="deptName">
          <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="班次类型" prop="status">
          <el-select v-model="queryParams.type" placeholder="班次状态" clearable style="width: 200px">
            <el-option label="固定班次" :value="1" />
            <el-option label="弹性班次" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dept:add']">新增</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <el-table :data="tableData">
      <el-table-column v-for="(obj, index) in tableHeader" :key="index" :label="obj.label" :prop="obj.prop" align="center">
        <template #default="{ row }">
          <span v-if="obj.prop === 'type'">
            {{ row.type === 1 ? "固定班次" : "弹性班次" }}
          </span>
          <span v-else-if="obj.prop === 'way'"> {{ row.way === 1 ? "GPS" : row.way === 2 ? "WiFi" : "GPS和WiFi" }}</span>
          <span v-else>{{ row[obj.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link icon="Edit" @click="handleUpdate(row)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="handleDelete(row.id)">
            <template #reference>
              <el-button type="danger" link icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalNum > 0" :total="totalNum" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getAttendanceSetting, deleteAttendanceSetting } from "@/api/personnelManagement";
const router = useRouter();
const showSearch = ref(true);
const queryParams = reactive({
  name: "",
  type: "",
  pageNum: 1,
  pageSize: 10,
});
const totalNum = ref(0);
const tableData = ref([]);
const tableHeader = [
  {
    prop: "id",
    label: "序号",
  },
  {
    prop: "name",
    label: "班次名称",
  },
  {
    prop: "type",
    label: "班次类型",
  },
  {
    prop: "way",
    label: "考勤方式",
  },
  {
    prop: "workTime",
    label: "工作时长",
  },
  {
    prop: "effectiveTime",
    label: "生效时间",
  },
];
const getList = async () => {
  const { rows, code, total } = await getAttendanceSetting(queryParams);
  if (code == 200) {
    totalNum.value = total;
    tableData.value = rows;
  }
};
getList();
const handleQuery = () => {};
const resetQuery = () => {
  queryParams.name=""
  queryParams.type=""
  getList()
};
const handleAdd = (obj) => {
  router.push("/personnelManagement/attendance/add");
};
const handleUpdate = (row) => {
  router.push({
    path:'/personnelManagement/attendance/add',
    query:{id:row.id}
  });
};
const handleDelete = async (id) => {
  const { code } = await deleteAttendanceSetting(id);
  if (code == 200) {
    getList();
  }
};
</script>

<style scoped></style>
